<template>
  <div class="margin30">
    <el-tabs tab-position="left">
      <el-tab-pane label="教案">
        <div class="line-height40 marginL10">
          <el-row>
            <el-col v-if="resTeaching.tagList && resTeaching.tagList.length > 0" :span="20">
              <div class="grid-content">
                <h2 class="fw">教案标签</h2>
                <div v-for="(item,index) in listData.baseInfo.ColumnTag" :key="index">
                  <el-tag>{{ item.tags }}</el-tag>
                </div>
              </div>
              <div class="grid-content marginT10">
                <div v-for="(item, index) in resTeaching.tagList" :key="index" class="tags-box">
                  <div class="keynote">{{ item.tagName }}</div>
                  <div class="tag">
                    <el-tag
                      v-for="(tags, inx) in item.tags"
                      :key="index+''+inx"
                      class="marginL10"
                    >{{ tags }}</el-tag>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col v-else :span="20">
              <div class="grid-content">
                <h2 class="fw">教案标签</h2>
              </div>
              <div class="grid-content marginT10">
                <div class="grid-content">暂无标签数据</div>
              </div>
            </el-col>
            <el-col :span="18">
              <div v-if="resTeaching.content" class="grid-content marginT30">
                <h2 class="fw">教学过程</h2>
                <div class="line-height20 marginT10" v-html="resTeaching.content">
                  <!-- <span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span>
                </div>
                <el-image
                  class="marginT10"
                  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                  />-->
                </div>
              </div>
            </el-col>
            <el-col :span="20">
              <div class="grid-content marginT30">
                <h2 class="fw">教案文件</h2>
                <div
                  v-for="(fileItem, fileInx) in resTeaching.filesArr"
                  :key="fileInx"
                  class="line-height20 marginT10 filesArr"
                >
                  <div class="name">{{ fileItem.filename }}</div>
                  <div
                    v-for="(formatItem, formatInx) in fileItem.children"
                    :key="formatInx"
                    class="marginL10"
                  >
                    <el-button
                      v-if="formatItem.type === 'pdf'"
                      type="primary"
                      size="mini"
                      @click="openFile(formatItem)"
                    >预览</el-button>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="课件">
        <div v-if="resCoursewareList && resCoursewareList.length > 0">
          <div v-for="(item, index) in resCoursewareList" :key="index">
            <div class="block">
              <el-image class="marginT10" fit="cover" style="width: 200px;" :src="item.files" />
            </div>
            <div class="line-height30 marginT20">文件标签</div>
            <div
              v-for="(tagsItem, tagsInx) in item.tagList"
              :key="tagsInx"
              class="tags-box marginT10"
            >
              <div style=" border: 1px solid #ccc;">
                <div class="tags-item">
                  <div class="left">{{ tagsItem.tagName }} ：</div>
                  <div class="center">
                    <el-tag
                      v-for="(tag, inx) in tagsItem.tags"
                      :key="inx"
                      style=" background-color: white; border-color: white;"
                    >{{ tag }}</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>暂无课件数据</div>
      </el-tab-pane>
      <el-tab-pane label="课堂实录">
        <h2 class="fw">课堂实录标签</h2>
        <div v-if=" resCourseVideo" class="marginT20">
          <div
            v-for="(tagsItem, tagsInx) in resCourseVideo.tagList"
            :key="tagsInx"
            class="tags-box marginT10"
          >
            <div style=" border: 1px solid #ccc;">
              <div class="tags-item">
                <div class="left">{{ tagsItem.tagName }} ：</div>
                <div class="center">
                  <el-tag
                    v-for="(tag, inx) in tagsItem.tags"
                    :key="inx"
                    style=" background-color: white; border-color: white;"
                  >{{ tag }}</el-tag>
                </div>
              </div>
            </div>
          </div>

          <div class="marginT20">
            <video width="400px" controls class="clearfix">
              <source :src="resCourseVideo.files" type="video/mp4" />
            </video>
            <el-row :gutter="20">
              <div class="line-height40 marginT10 marginL10">精彩片段</div>
              <ul>
                <el-col v-for="(item, index) in resCourseVideo.fragmentsArr" :key="index" :span="6">
                  <li>
                    <video width="100%" controls class="clearfix">
                      <source :src="item" type="video/mp4" />
                    </video>
                  </li>
                </el-col>
              </ul>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="教学反思">
        <div v-if="resTeachingReflection.content" v-html="resTeachingReflection.content" />
        <div v-else>暂无教学反思数据</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import Pagination from '@/components/Pagination/index';
export default {
  name: 'ClassContent',
  components: {
    // Pagination
  },
  props: ['list', 'programmeInx', 'classHourInx'],
  data () {
    return {
      formInline: {
        search: ''
      },
      activeName: 'first',
      programmeIndex: this.programmeInx, // 方案
      classHourIndex: this.classHourInx, // 课时
      total: 10,
      listData: this.list, // 方案数据
      resTeaching: null, // 教案
      resCoursewareList: null, // 课件
      resCourseVideo: null, // 课堂实录
      resTeachingReflection: null // 教学反思
    };
  },
  watch: {
    programmeInx (newName, oldName) {
      this.programmeIndex = newName;
      this.init();
    },
    classHourInx (newName, oldName) {
      // console.log('classHourInx:', newName + '==' + oldName);
      this.classHourIndex = newName;
      this.init();
    }
  },
  created () {
    // console.log('this.classHourIndex:', this.classHourIndex);
    this.init();
  },
  methods: {
    openFile (item) {
      window.open(item.url, '_blank');
    },
    init () {
      if (this.listData.resList[this.programmeIndex].resList[this.classHourIndex].resTeaching.editModel === 'MODULE') {
        var newArr = [];
        if (
          this.listData.resList[this.programmeIndex].resList[this.classHourIndex]
            .resTeaching.files
        ) {
          // 处理附件
          var files = JSON.parse(
            this.listData.resList[this.programmeIndex].resList[this.classHourIndex]
              .resTeaching.files
          );
          for (var i in files.module) {
            var index = files.module[i].lastIndexOf('\/');
            var inx = files.module[i].lastIndexOf('.');
            var name = files.module[i].substring(index + 1, files.module[i].length);
            var nameInx = name.lastIndexOf('.');
            var filename = name.substring(0, nameInx);

            var type = files.module[i].substring(inx + 1, files.module[i].length);
            newArr.push({
              filename: filename,
              name: name,
              url: files.module[i],
              type: type
            });
          }

          // 归类
          var obj = {};
          newArr.forEach(item => {
            var { filename } = item;
            if (!obj[filename]) {
              obj[filename] = {
                filename: filename,
                children: []
              };
            }

            obj[filename].children.push(item);
          });

          this.listData.resList[this.programmeIndex].resList[
            this.classHourIndex
          ].resTeaching.filesArr = Object.values(obj);
        } else {
          this.listData.resList[this.programmeIndex].resList[
            this.classHourIndex
          ].resTeaching.filesArr = newArr;
        }
      }

      this.resTeaching = this.listData.resList[this.programmeIndex].resList[this.classHourIndex].resTeaching; // 教案
      // console.log('教案:', this.resTeaching);
      this.resCoursewareList = this.listData.resList[this.programmeIndex].resList[this.classHourIndex].resCoursewareList; // 课件
      // console.log('课件:', this.resCoursewareList);

      // 课堂实录
      this.resCourseVideo = this.listData.resList[this.programmeIndex].resList[this.classHourIndex].resCourseVideo; // 课堂实录
      this.resCourseVideo.fragmentsArr = this.resCourseVideo.fragments ? this.resCourseVideo.fragments.split(',') : '';
      // console.log('课堂实录:', this.resCourseVideo);
      this.resTeachingReflection = this.listData.resList[this.programmeIndex].resList[this.classHourIndex].resTeachingReflection; // 教学反思
      // console.log('教学反思:', this.resTeachingReflection);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 20px;
}
ul li {
  list-style-type: circle !important;
}

.tags-box {
  display: flex;
  .keynote {
    margin-right: 10px;
  }
  .tag {
    flex: 1;
  }
}

.filesArr {
  align-items: center;
  display: flex;
}

.tags-box {
  .tags-item {
    display: flex;
    padding-left: 15px;
    align-items: center;

    .left {
      width: 110px;
    }
    .center {
      flex: 1;
    }
  }
}
</style>
